<script setup>
import {reactive, ref} from 'vue'
import {logIn, getUserInfo, logInByRandomPassword} from '@/api/user.js'
import {setToken, setRefreshToken, setTokenType} from '@/lib/util'
import {DatePicker, Message} from 'view-ui-plus'


import {useRouter} from 'vue-router'

const router = useRouter()
import useUserStore from '@/store/base/user'

const userStore = useUserStore()

const logInfo = reactive({
  username: '中二少年学编程',
  password: 'admin@123'
})
const rule_log = reactive({
  username: [
    {required: true, message: '请填写姓名', trigger: 'blur'}
  ],
  password: [
    {required: true, message: 'Please fill in the password.', trigger: 'blur'},
    {type: 'string', min: 6, message: '密码最少6位', trigger: 'blur'}
  ],
  randomPwd: [
    {required: true, message: '请填写随机码', trigger: 'blur'}
  ]
})

function handleSubmit() {
  // router.push({name:'home_page'})
  // return
  if (randomPwdShow.value) {
    if (logInByRandomPassword(logInfo.randomPwd).success) {
      setToken("testtoken")
      router.push({name: 'home_page'})
    } else {
      Message.error({
        background: true,
        content: '请输入正确验证码'
      });
    }
  } else {
    setToken("testtoken")
    router.push({name: 'home_page'})
  }


}

const randomPwdShow = ref(true)

function changeLoginType() {
  randomPwdShow.value = !randomPwdShow.value
}

// const showLoginCard=ref(false)
function openShop() {

  myApi.handleOpenBrowser('https://item.taobao.com/item.htm?spm=a21n57.1.0.0.5fab523c0HGrai&id=729194089902&ns=1&abbucket=0#detail')
}

/*更新功能*/
import UpdateProgress from 'module-base/views/update/UpdateProgress.vue'
</script>

<template>
  <div class="login">
    <div class="login-con">
      <!--      <template>-->
      <div class="alert-wrap">
        <Alert class="alert" type="warning" show-icon>
          免责声明！
          <template #desc>
            强行破解或使用破解软件可能会导致宿主机运行异常，请合规合法使用软件，如因个人非法使用软件导致任何后果，与本软件开发者无关！
          </template>
        </Alert>
        <Alert class="alert">

          <template #desc>
            本软件唯一官方店铺：<a @click="openShop">中二少年工作室</a>
          </template>
        </Alert>
      </div>

      <!--      </template>-->
      <Card icon="log-in" title="欢迎登录" :bordered="true" style="z-index: 1">
        <template #extra>
          <a href="#" @click.prevent="changeLoginType">
            <Icon type="ios-loop-strong"></Icon>
            切换登录方式
          </a>
        </template>
        <div class="form-con">
          <Form :rules="rule_log" :model="logInfo">
            <template v-if="randomPwdShow">
              <FormItem prop="randomPwd">
                <Input type="text" v-model="logInfo.randomPwd" placeholder="请输入随机码">
                  <template #prepend>
                    <Icon type="ios-lock-outline"></Icon>
                  </template>
                </Input>
              </FormItem>
            </template>
            <template v-else>
              <FormItem prop="username">
                <Input type="text" v-model="logInfo.username" placeholder="请输入姓名">
                  <template #prepend>
                    <Icon type="ios-person-outline"></Icon>
                  </template>
                </Input>
              </FormItem>
              <FormItem prop="username">
                <Input type="password" v-model="logInfo.password" password placeholder="请输入密码">
                  <template #prepend>
                    <Icon type="ios-lock-outline"></Icon>
                  </template>
                </Input>
              </FormItem>
            </template>


            <div style="display: flex;justify-content: space-between;margin: 8px">
              <Poptip title="官方小程序：中二少年工具箱">
                <Button type="primary" shape="circle" long style="margin: 0 4px" v-if="randomPwdShow">获取验证码
                </Button>
                <template #content>
                  <div style="display: flex;flex-direction: row;align-items: center">
                    <Text type="warning" style="white-space: normal">
                      中二少年各系列工具箱，均为免费工具，谨防上当受骗，扫码小程序，获取免费登录验证码！！！
                    </Text>
                    <div>
                      <img src="@/assets/img/miniApp.jpg" style="width: 100px;height: 100px"/>
                    </div>
                  </div>

                </template>
              </Poptip>
              <Button type="primary" shape="circle" @click="handleSubmit" long style="margin: 0 4px">登录</Button>
            </div>
          </Form>
        </div>
        <div style="text-align: center; font-weight: bold; font-size:16px; color: red">
          <Icon type="md-warning" style="position:relative; top: -1px"/>
          请支持免费正版@中二少年学编程
        </div>
      </Card>

      <UpdateProgress></UpdateProgress>
    </div>
  </div>
</template>


<style scoped lang="less">
.login {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.ivu-input-suffix) {
  z-index: 9;
}

.alert-wrap {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.alert {
  width: 80%;
}
</style>

